<template>
  <div class="SystemManagement-box">
    <div class="SystemManagement-box-top">
      <div class="return-btn">
        <div class="return">
          <span @click="goBack"></span>
        </div>
      </div>
    </div>
    <div class="SystemManagement-box-cont">
      <div class="borderStyle SystemManagement-box-left">
        <div class="tabNav-box">
          <div
            class="tabNav"
            v-for="(item, index) in SystemManagementList"
            :key="index"
            :class="item.path===activeId? 'background':''"
            @click="Jump(item)"
          >
            <span
              :id="item.path===activeId? 'fontspan':''"
              :class="item.iconfont"
              class="iconfont icons fonticon"
            ></span>
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="borderStyle SystemManagement-box-right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component
export default class extends Vue {
  public activeId = "/SystemManagement/UserManagement";
  SystemManagementList = [
    {
      id: 1,
      name: "用户管理",
      iconfont: "iconyonghuguanli",
      path: "/SystemManagement/UserManagement",
      active: true,
    },
    {
      id: 2,
      name: "角色管理",
      iconfont: "iconjiaoseguanli",
      path: "/SystemManagement/RoleManagement",
      active: false,
    },
    {
      id: 3,
      name: "菜单管理",
      iconfont: "iconcaidanguanli",
      path: "/SystemManagement/MenuManagement",
      active: false,
    },
    {
      id: 4,
      name: "部门管理",
      iconfont: "iconbumenguanli",
      path: "/SystemManagement/DivisionManagement",
      active: false,
    },
  ];
  //返回按钮
  goBack() {
    this.$router.push("/auxiliarymonitor/overview");
  }
  Jump(item) {
    this.activeId = item.path;
    this.$router.push(item.path);
  }
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    this.activeId = to.path;
    // this.routeObj = this.$route.query;
    // this.isShow = to.name;
    console.log(to);
    // this.stationName2 = to.query.code;
  }
}
</script>

<style lang="scss" scoped>
.SystemManagement-box {
  //   display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.88rem 0.24rem 0.24rem;
  margin: 0;
  color: #fff;
  .SystemManagement-box-top {
    height: 0.4rem;
    line-height: 0.4rem;
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .SystemManagement-box-cont {
    display: flex;
    height: 96%;
    .SystemManagement-box-left {
      width: 3.03rem;
      height: 100%;
      .tabNav-box {
        height: calc(100% - 0.8rem);
        overflow-y: auto;
        box-sizing: border-box;
        padding-bottom: 0.05rem;
        .tabNav {
          height: 0.64rem;
          line-height: 0.64rem;
          font-size: 0.18rem;
          padding-left: 0.35rem;
          border-bottom: 0.01rem solid rgba(95, 115, 171, 0.45);
          cursor: pointer;
          #fontspan {
            color: #fff;
          }
          .fonticon {
            color: #aaa;
          }
        }
        .tabNav:hover {
          border: none;
          background: linear-gradient(
            90deg,
            rgba(20, 123, 252, 0.65) 0%,
            rgba(20, 123, 252, 0.65) 53%,
            rgba(20, 123, 252, 0.5) 63%,
            rgba(20, 123, 252, 0) 100%
          );
        }
        .background {
          border: none;
          background: linear-gradient(
            90deg,
            rgba(20, 123, 252, 0.65) 0%,
            rgba(20, 123, 252, 0.65) 53%,
            rgba(20, 123, 252, 0.5) 63%,
            rgba(20, 123, 252, 0) 100%
          );
        }
      }
    }
    .SystemManagement-box-right {
      flex: 1;
      height: 100%;
      margin-left: 0.2rem;
    }
  }
}
</style>

